CSS এবং HTMX Integration উদাহরণ
HTMX এবং CSS একসাথে ব্যবহার করে আমরা ডাইনামিক ওয়েব অ্যাপ্লিকেশনগুলিতে স্নিগ্ধ স্টাইল এবং অ্যানিমেশন যোগ করতে পারি। এই উদাহরণে, আমরা একটি সরল To-Do List অ্যাপ তৈরি করব যেখানে ব্যবহারকারী নতুন টাস্ক যোগ করতে পারবেন এবং CSS ব্যবহার করে কিছু অ্যানিমেশন যুক্ত করব।
১. পরিবেশ সেটআপ
১.১. HTML ফাইল তৈরি করুন
প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX and CSS Integration</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
<style>
body {
font-family: Arial, sans-serif;
}
.task {
padding: 10px;
background-color: #f4f4f4;
border: 1px solid #ddd;
margin-bottom: 5px;
transition: transform 0.3s ease, opacity 0.3s ease; /* CSS Transition */
}
.task.hidden {
opacity: 0;
transform: scale(0.9);
}
</style>
</head>
<body>
<h1>My To-Do List</h1>
<form hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
<input type="text" name="task" placeholder="Add a new task" required>
<button type="submit">Add Task</button>
</form>
<h2>Tasks</h2>
<div id="task-list">
<!-- New tasks will be added here -->
</div>
</body>
</html>
২. সার্ভার সাইড কোড (Flask)
২.১. Python Flask ব্যবহার করে সার্ভার তৈরি করুন
একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:
from flask import Flask, render_template_string, request
app = Flask(__name__)
tasks = []
@app.route('/')
def index():
return render_template_string(open('index.html').read())
@app.route('/add-task', methods=['POST'])
def add_task():
task = request.form['task']
tasks.append(task)
return f'<div class="task">{task}</div>' # Return new task as a div
if __name__ == '__main__':
app.run(debug=True)
৩. সার্ভার চালানো
৩.১. টার্মিনালে সার্ভার চালান
python app.py
৪. ব্রাউজারে পরীক্ষা করা
- ব্রাউজারে
http://127.0.0.1:5000/URL এ যান। - একটি নতুন টাস্ক যোগ করতে ফর্মটি ব্যবহার করুন এবং "Add Task" বোতামে ক্লিক করুন। এটি নতুন টাস্কটি
#task-listএ যুক্ত করবে।
৫. অ্যানিমেশন যুক্ত করা
৫.১. অ্যানিমেশন যুক্ত করা
নতুন টাস্ক যুক্ত করার সময় অ্যানিমেশন প্রদর্শন করতে নিচের JavaScript কোডটি HTML ফাইলে যুক্ত করুন:
<script>
document.addEventListener('htmx:afterSwap', function(event) {
const newTask = event.detail.elt.querySelector('.task');
if (newTask) {
newTask.classList.remove('hidden'); // Remove hidden class to fade in
setTimeout(() => newTask.classList.add('hidden'), 3000); // Add hidden class after 3 seconds
}
});
</script>
- ব্যাখ্যা: এখানে, নতুন টাস্ক যুক্ত করার পরে একটি অ্যানিমেশন তৈরি করা হয়েছে। টাস্ক যুক্ত হওয়ার সময়
hiddenক্লাসটি সরিয়ে দেওয়া হয় এবং 3 সেকেন্ড পরে এটি আবার যুক্ত করা হয়, যা অ্যানিমেশন তৈরি করে।
সারসংক্ষেপ
- HTMX: AJAX কলের মাধ্যমে ডাইনামিক কন্টেন্ট লোড করে।
- CSS Transitions: টাস্ক যোগ করার সময় স্নিগ্ধ পরিবর্তন তৈরি করে।
- JavaScript: HTMX এর মাধ্যমে লোড হওয়া কন্টেন্টে অ্যানিমেশন যুক্ত করে।
HTMX এবং CSS এর সংযোগ ব্যবহার করে আপনি আরও কার্যকরী এবং আকর্ষণীয় ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম হবেন।
Content added By
Read more
